<template>
  <div style="display: flex;height: 1rem;width:100%;padding: 0.2rem 0.2rem">
    <van-icon size="0.8rem" name="exchange" @click="$router.push('/')"/>
    <input v-model="searchKey" placeholder="杨和苏" @keyup.enter="entryKey">
    <van-button size="small" round plain type="primary" @click="entryKey">搜 索</van-button>
  </div>
  <div style="display: flex;position: relative">
    <p>历史:</p>
    <span class="serachTag" type="warning" closeable v-for="(item,index) in keyWordsList" :key="index"
          @click="serachByThisHistory(item)">
      {{ item }}
    </span>
    <van-icon style="position: absolute;right: 0" size="0.6rem" name="delete" @click="deleteHistory"/>
  </div>
  <div style="display: flex;justify-content: space-between;align-items: center;margin: 0.4rem 0;padding: 0 0.2rem"
       v-for="(item,index) in searchSongsList"
       :key="index">
    <div style="display: flex;align-items: center" @click="updatePlayIndex(item)">
      <div style="text-align: right;width: 0.5rem">
        <span>{{ index + 1 }}</span>
      </div>
      <div style="display: flex;flex-direction: column;margin-left: 0.6rem">
        <span style="font-weight: bold">{{ item.name }}</span>
        <div style="margin-top: 0.1rem">
              <span style="color: #999" v-for="(item2,index) in item.artists" :key="index">
                {{ item2.name }}&nbsp;&nbsp;</span>
        </div>
      </div>
    </div>
    <div>
      <van-icon size="0.6rem" name="video" v-if="item.mvid!=0"/>
      <van-icon size="0.6rem" name="bars"/>
    </div>
  </div>
</template>

<script>
import {getSearchMusic} from "../api/home";

export default {
  name: "Search",
  data() {
    return {
      // 输入的搜索关键字
      searchKey: '',
      // 搜索历史关键字的数组
      keyWordsList: JSON.parse(localStorage.getItem('searchKeyHistory')) || [],
      // 搜索返回的歌曲列表
      searchSongsList: []
    }
  },
  methods: {
    // 搜索
    async entryKey() {
      if (this.searchKey != '') {
        this.keyWordsList.unshift(this.searchKey)
        // 去重
        this.keyWordsList = [...new Set(this.keyWordsList)]
        // 固定长度
        if (this.keyWordsList.length >= 5) {
          this.keyWordsList.splice(this.keyWordsList.length - 1, 1)
        }
        // 存储到localStorage
        localStorage.setItem('searchKeyHistory', JSON.stringify(this.keyWordsList))
        // 发请求
        let res = await getSearchMusic(this.searchKey)
        // console.log(res)
        if (res.data.code == 200) {
          this.searchSongsList = res.data.result.songs
        }
        // 每次搜索结束后清空搜索框
        this.searchKey = ''
      }
    },
    // 删除搜索历史
    deleteHistory() {
      localStorage.removeItem('searchKeyHistory')
      this.keyWordsList = []
    },
    // 点击某个搜索历史进行搜索
    async serachByThisHistory(item) {
      // 发请求
      let res = await getSearchMusic(item)
      // console.log(res)
      if (res.data.code == 200) {
        this.searchSongsList = res.data.result.songs
      }
    },
    // 点击搜索返回列表中的某首歌曲，加入到播放列表中
    updatePlayIndex(item) {
      item.al = item.album
      item.al.picUrl = item.album.artist.img1v1Url
      // 加到最后一首
      this.$store.commit('footer/pushPlayList', item)
      // 播放刚刚加入的最后一首
      this.$store.commit('footer/updatePlayMusicIndex', this.$store.state.footer.playLists.length - 1)
    }
  }
}
</script>

<style scoped>
input {
  margin-left: 0.3rem;
  border: none;
  border-bottom: 2px solid #999;
  width: 70%;
  padding: 0.1rem;
}

.serachTag {
  margin: 0 0.2rem;
  background-color: yellowgreen;
}
</style>